<template>
  <div class="table">
    <a-table :columns="columns" :data-source="tableData" :pagination="false"></a-table>
  </div>
</template>

<script>
export default {
  name: 'ChartInfoTable',
  data(){
    return {
      tableData:[],
      columns:[],
    }
  },
  props:{
    activePart:{
      type:String,
      default:''
    },
    activeKey:{
      type:String,
      default:''
    },
  },
  watch:{
    activeKey:{
      immediate:true,
      handler(newVal,oldVal){
        this.getTableData()
      }
    },
    activePart:{
      immediate:true,
      handler(newVal,oldVal){
        this.getTableData()
      }
    }
  },
  methods:{
    getTableData(){
      if (this.activeKey !== 'PIC'){
        this.$http.get('/inspect/reportapi/getBarList',{
          params:{
            line:this.activePart,
            type:this.activeKey,
          }
        }).then(res=>{
          let arr = [];

          // {name:'不良名称',value:'badname'},
          // {name:'不良率',value:'bll'},
          // {name:'良率',value:'lpl'},
          // {name:'良品数',value:'lps'},
          // {name:'总数',value:'zs'},
          // {name:'不良数',value:'bls'},
          // {name:'目标值',value:'goal'},
          // {name:'额外率',value:'additon'},
          // {name:'部门',value:'org'},

          let typeList = [];
          if (this.activeKey === 'FPYR') {
            typeList = [
              {name:'总数',value:'zs'},
              {name:'良率',value:'lpl'},
              {name:'目标值',value:'goal'},
              {name:'不良数',value:'bls'},
              {name:'不良率',value:'bll'},
            ]
          }else if (this.activeKey === 'TOP') {
            typeList = [
              {name:'不良数',value:'bls'},
              {name:'不良率',value:'bll'},
              {name:'额外率',value:'additon'},
            ]
          }else if (this.activeKey === 'FAIL') {
            typeList = [
              {name:'总数',value:'zs'},
              {name:'良率',value:'lpl'},
              {name:'目标值',value:'goal'},
              {name:'不良数',value:'bls'},
              {name:'不良率',value:'bll'},
            ]
          }
          let obj = {
            badname : [],
            bll : [],
            lpl : [],
            lps : [],
            zs : [],
            bls : [],
            goal : [],
            additon : [],
            org : [],
          }
          if (res.success){
            res.result.forEach(item=>{
              obj.badname.push(item.badname)
              obj.bll.push(item.bll)
              obj.lpl.push(item.lpl)
              obj.lps.push(item.lps)
              obj.zs.push(item.zs)
              obj.bls.push(item.bls)
              obj.goal.push(item.goal)
              obj.additon.push(item.additon)
              obj.org.push(item.org)
            })
            for (let i = 0;i<typeList.length;i++){
              let name = typeList[i].value
              arr.push({
                key: i+1,
                type:name,
                name:typeList[i].name,
                one:obj[name][0],
                two:obj[name][1],
                three:obj[name][2],
                four:obj[name][3],
                five:obj[name][4],
                six:obj[name][5],
                seven:obj[name][6],
                eight:obj[name][7],
                nine:obj[name][8],
                ten:obj[name][9],
                eleven:obj[name][10],
                twelve:obj[name][11],
              })
            }
            this.tableData = arr
          }else{
            this.$message.error(res.message)
          }
        });
      }
    },
    setData(){
      this.columns = [
        {
          title: '类型',
          dataIndex: 'name',
          key: 'name',
        },
        {
          title: '1月',
          dataIndex: 'one',
          key: 'one',
        },
        {
          title: '2月',
          dataIndex: 'two',
          key: 'two',
        },
        {
          title: '3月',
          dataIndex: 'three',
          key: 'three',
        },
        {
          title: '4月',
          dataIndex: 'four',
          key: 'four',
        },
        {
          title: '5月',
          dataIndex: 'five',
          key: 'five',
        },
        {
          title: '6月',
          dataIndex: 'six',
          key: 'six',
        },
        {
          title: '7月',
          dataIndex: 'seven',
          key: 'seven',
        },
        {
          title: '8月',
          dataIndex: 'eight',
          key: 'eight',
        },
        {
          title: '9月',
          dataIndex: 'nine',
          key: 'nine',
        },
        {
          title: '10月',
          dataIndex: 'ten',
          key: 'ten',
        },
        {
          title: '11月',
          dataIndex: 'eleven',
          key: 'eleven',
        },
        {
          title: '12月',
          dataIndex: 'twelve',
          key: 'twelve',
        },
      ]
    },
  },
  mounted() {
    this.setData()
  }
}
</script>

<style scoped lang="less">
  .table {
    /deep/ .ant-table-thead > tr > th {
      padding: 10px 10px;
    }
    /deep/ .ant-table-tbody > tr > td {
      padding: 10px 10px;
    }
    /deep/ .ant-table-tbody .ant-table-row td {
      padding-top: 10px;
      padding-bottom: 10px;
    }
  }
</style>